<template>
<div class="goods">
  <!--搜索区域-->
  <div class="header">
    <el-input v-model="input" placeholder="请输入内容"/>
    <el-button type="primary" @click="queryUser">查询</el-button>
    <el-button type="primary">添加</el-button>
  </div>

  <!--表格区域-->
  <div class="wrapper">
    <el-table stripe :data="tableData" style="width: 100%" >
      <el-table-column  type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="编号" width="120"></el-table-column>
      <el-table-column prop="username" label="姓名" width="120" show-tooltip-when-overflow></el-table-column>
      <el-table-column prop="password" label="密码" show-tooltip-when-overflow></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button  size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!--分页-->
  <page-ination :total="total" :page-size="pageSize" @changePage="changePage"/>

</div>
</template>

<script>


import axios from "axios";
import PageInation from "../PageInation/PageInation";

export default {
  name: "Goods",
  data() {
    return {
      input: "",
      tableData: [],
      total:0,
      pageSize:5
    }
  },
  components:{
    PageInation
  },
  methods:{
    handleEdit(index, row) {
      this.$message.info(index + row);
    },
    handleDelete(index, row) {
      this.$message.info(index + row);
    },
    /**
     *num : 分页页码
     */
    changePage(num){
      this.http(num);
    },
    /**
     * 分页使用
     */
    http(current_page){
      axios.post(
        "http://localhost:8888/getall",
        {start:current_page, pageSize:5}
      ).then(response=>{
        if(response.status === 200){
          this.tableData = response.data.users;
          this.total = response.data.total;
        }
      });
    },
    queryUser(){
      if(this.input === ""){
        this.$message.warning("请输入用户名");
      }
      else{
        axios.get(
          "http://localhost:8888/query/" + this.$data.input
        ).then(
          response=>{
              if(response.data === null){
                this.$message.error("没有叫" + this.input + "的用户");
              }
              else{
                this.tableData = [response.data];
              }
            this.input = "";
          }
        );
      }
    }
  },
  created() {
    this.http(1);
  }
}
</script>

<style lang="less" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.goods{
  margin: 20px;
}
.header{
  display: flex;
  button{
    margin-left: 20px;
  }
}
.wrapper{
 margin: 20px 0;
}
</style>
